<template>
    <div class="HomeSearch-div">
     <div class="banner">
        <img
          src="https://img.alicdn.com/imgextra/i2/2219667673245/O1CN01wGetYN1ZqGJeuxP5F_!!2219667673245-2-tblife2_ugc.png""/>
     </div>
      <h1 class="home-logo">
        <a href="#"><img
            src="https://img.alicdn.com/imgextra/i3/O1CN01LvV0d41fjkGWg6iN6_!!6000000004043-2-tps-480-144.png"></img></a>
        </h1>
        <div class="search-box">
          <div class="search">
            <input id="searchInput" type="text" placeholder="" @keyup.enter="goSearch"></input>
            <button @click="goSearch">搜索</button>
            <div class="inner-search-text" @mouseenter="underbaby = true" @mouseleave="underbaby = false">
              &nbsp;&nbsp;宝贝<i class="iconfont icon-xiala" :class="{changed:underbaby}"></i>&nbsp;&nbsp;|</div>
            <div class="inner-search-text2" v-show="underbaby" @mouseenter="underbaby = true"
              @mouseleave="underbaby = false">
              <li>&nbsp;&nbsp;店铺</li>
            </div>
          </div>
        </div>
    </div>
</template>
<style scoped>
.HomeSearch-div{
}
.search-box .iconfont.icon-xiala{
 transition: transform 0.3s ease;
  transform: rotate(0deg);
  display: inline-block; 
}
.search-box .iconfont.icon-xiala.changed{
transform: rotate(180deg);
}
.banner {
    position: relative;

    width: 1690px;
    height: 210px;

}

.banner img {
    width: 1738px;
    height: 100%;
    position: absolute;
    object-fit: cover;
    left: -10px;

}
.home-logo{
       width: 80px;
    height: 50px;
    margin-top: 15px;
    margin-left: 40px;
    position: absolute;
}
.home-logo a {
    position: relative;
    display: flex;
    width: 245px;
    height: 78px;
    margin-top: -140px;
    margin-left: 80px;
}

.search-box {
    position: absolute;
    top: 135px;
    left: 410px;
    height: 46px;
    width: 850px;
    border: 2px solid #ff5000;
    border-radius: 10px;
}

.search input {
  padding:0;
  font-size: 16px !important;
    position: absolute;
    height: 43px;
    width: 776px;
    left: 70px;
    top: 0px;
    border-radius: 0px 10px 10px 0px;
    outline: none;
    border: none;

}

.search button {
    position: absolute;
    display: flex;
    top: 1px;
    height: 44px;
    width: 80px;
    left: 768px;
    background-color: #ff5000;
    border-radius: 10px;
    border: none;
    font-size: 20px;
    color: #fff;
    white-space: nowrap;
    justify-content: center;
    align-items: center;
}

.inner-search-text {
    padding-top: 10px;
    align-items: center;
    height: 35px;
    width: 70px;

    position: absolute;
    top: 0px;
    left: 0px;
    background: white;
    border-radius: 10px 0px 0px 10px;
}

.inner-search-text2 {
    align-items: center;
    background: white;
    height: 50px;
    width: 70px;
    display: flex;
    position: absolute;
    top: 34px;
    left: 0px;
    border-radius: 0px 0px 10px 10px;
    z-index: 999;
}

.inner-search-text2 li {
    list-style-type: none;
}

.inner-search-text2 li:hover {
    color: #ff5000;
}
</style>
<script> 
export default {
  name: "HomeSearch",
  data() {
    return {
      underbaby: false,
    };
  },
  methods: {
   goSearch(){
  const input=document.getElementById("searchInput");
  const value=input.value.trim();
  if(this.$route.path!=="/SearchView"){
      if(value !== ""){
    this.$router.push({
      path:"/SearchView",
      query:{
        value:value
      }
    })
  }
  }else{
    alert("调用后端接口搜索！");
  }

},
},
}
</script>